<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
<div class="demoTable" style="padding:10px 0 0 15px">
    <div class="layui-inline">
        <input class="layui-input" name="keyword" id="keyword" autocomplete="off">
    </div>
    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">  新增</i></button>
		<button class="layui-btn layui-btn-blue" lay-event="delete"><i class="layui-icon layui-icon-delete">  删除</i></button>
	</div>
</script>

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>

<script>
layui.use(['table','layer','upload','form'], function(){
	var table = layui.table;
	var layer = layui.layer,
    form = layui.form;

	var $ = layui.jquery, active = {
			reload:function () {
				var keyword = $("#keyword").val();
				console.log(keyword)
				table.reload('contenttable',{
					method:'get',
					where:{keyword:keyword}
				});
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/user/selectUserList.do'
	    ,toolbar: '#toolbarDemo'
	    ,title: '用户数据表'
	    ,id :'contenttable'
	    ,limits:[10,20,30]
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'uid', title:'ID', fixed: 'left', unresize: true, sort: true}
	      ,{field:'uname', title:'姓名', edit: 'text'}
	      ,{field:'uage', title:'年龄', edit: 'text', templet: function(res){
	    	  return '<em>'+ res.uage +'</em>'
	      }}
	      ,{field:'ugender', title:'性别', edit: 'text', sort: true}
	      ,{field:'uaddress', title:'地址'}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	    ]]
	    ,page: true
	});

	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	    	case 'add':
	    		layer.open({
					  type: 1 		//Page层类型
					  ,area: ['500px', '400px'] //宽  高
					  ,title: '新增'
					  ,shade: 0.6 	//遮罩透明度
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: '<form class="layui-form" id="addformID"><label class="layui-form-label">姓名</label><input class="layui-input" type="text" value="" style="width:300px; margin-top:15px"><br>'+
					  			'<label class="layui-form-label">年龄</label><input class="layui-input" type="text" value="" style="width:300px"><br>'+
					  			'<label class="layui-form-label">性别</label><input class="layui-input" type="text" value="" style="width:300px"><br>'+
					  			'<label class="layui-form-label">地址</label><input class="layui-input" type="text" value="" style="width:300px"><br>'+
					  			'<label class="layui-form-label">邮箱</label><input class="layui-input" lay-verify="email" type="text" value="" style="width:300px"><br>'+
					  			'<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform" style="margin-left:140px">立即提交</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button></form>'
					});
	      	break;
	    	case 'delete':
	        	var data = checkStatus.data;
	        	var idArr = new Array();
	        	if(data.length==0){
	        		toastr.warning("请至少选择一条记录！");
	        	}
	        	for(var i=0;i<data.length;i++){
	        		alert(data[i].uid)
	        	}
	      	break;
	      	case 'select':
	      		console.log(obj)
	      	break;
	    };
	});

	//监听行工具事件
	table.on('tool(test)', function(obj){
		var data = obj.data;
		console.log(obj)
		if(obj.event === 'del'){
		  layer.confirm('确定删除吗？', function(index){
		    var uid = obj.data.uid;
		    $.ajax({
		    	type:'post',
		    	url:'${pageContext.request.contextPath }/user/deleteUser.do',
		    	data:{"uid":uid},
		    	success:function(data){
		    		if(data>0){
		    			toastr.success("删除成功！");
		    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();
						},2000);
		    		}else{
		    			toastr.warning("删除失败！");
		    		}
		    	}

		    })
		    layer.close(index);
		  });
		} else if(obj.event === 'edit'){
			layer.open({
				  type: 1 		//Page层类型
				  ,area: ['500px', '400px'] //宽  高
				  ,title: '修改编辑'
				  ,shade: 0.6 	//遮罩透明度
				  ,maxmin: true //允许全屏最小化
				  ,anim: 1 		//0-6的动画形式，-1不开启
				  ,content: '<form class="layui-form" id="formID"><label class="layui-form-label">姓名</label><input class="layui-input" type="text" value="'+data.uname+'" style="width:300px; margin-top:15px"><br>'+
				  			'<label class="layui-form-label">年龄</label><input class="layui-input" type="text" value="'+data.uage+'" style="width:300px"><br>'+
				  			'<label class="layui-form-label">性别</label><input class="layui-input" type="text" value="'+data.ugender+'" style="width:300px"><br>'+
				  			'<label class="layui-form-label">地址</label><input class="layui-input" type="text" value="'+data.uaddress+'" style="width:300px"><br>'+
				  			'<label class="layui-form-label">邮箱</label><input class="layui-input" lay-verify="email" type="text" value="" style="width:300px"><br>'+
				  			'<button class="layui-btn layui-btn-blue" lay-submit lay-filter="subform" style="margin-left:140px">立即提交</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button></form>'
				});
		}
	});
	/**
     * 表单校验
     */
    form.verify({
    	//value：表单的值、item：表单的DOM对象
    	email: function(value, item){
    		if(value == ''){
    			return '不能为空';
    		}
    	}
    });
    /**
     * 通用表单提交(AJAX方式)（新增）
     */
    form.on('submit(addform)', function (data) {
    	$.ajax({
			url : '${pageContext.request.contextPath}/...do',
			data: data.field,
			data : new FormData($('#addformID')[0]),
			cache : false,
			type : "post",
			dataType : "json",
			processData : false,
			contentType : false,
			/*
				success: function (data) {},
				error: function (XMLHttpRequest, textStatus, errorThrown) {},
				beforeSend: function () {},
				complete: function () {}
			 */
			}).done(
				function(res) {
					if (res == 1) {
						toastrStyle();
						toastr.success('登记成功！');
					}
					$("#reset").click();
				}
			).fail(
				function(res) {
					toastrStyle();
					toastr.error('登记失败！');
				}
			)
			return false;
    });
    /**
     * 通用表单提交(AJAX方式)
     */
    form.on('submit(subform)', function (data) {
    	$.ajax({
			url : '${pageContext.request.contextPath}/...do',
			data: data.field,
			data : new FormData($('#formID')[0]),
			cache : false,
			type : "post",
			dataType : "json",
			processData : false,
			contentType : false,
			/*
				success: function (data) {},
				error: function (XMLHttpRequest, textStatus, errorThrown) {},
				beforeSend: function () {},
				complete: function () {}
			 */
			}).done(
				function(res) {
					if (res == 1) {
						toastrStyle();
						toastr.success('登记成功！');
					}
					$("#reset").click();
				}
			).fail(
				function(res) {
					toastrStyle();
					toastr.error('登记失败！');
				}
			)
			return false;
    });
});

toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上
</script>

</body>
</html>